<template>
  <!-- 右侧导航 -->
  <div class="rightnav-container" :style="'top:'+offTop+'px'">
    <div class="mask"></div>
    <i class="iconfont icon-icon_youdaohang_xiaodianshitianxian icontx"></i>
    <div class="rightnav-box">
      <div>
        <div class="tab-item" ref="tabItem" v-for="(item,index) in tablist" :key="index" @click="goClick(item.idname,index)" :class="{tabitemActive:index == tabindex}">{{item.title}}</div>
      </div>
      <div class="tab-bottom-icon iconqiehuan">
        <i class="iconfont icon-shangxiaqiehuan tabbottomicon"></i>
      </div>
      <div class="tab-bottom-icon iconshang" @click="goTopClick()">
        <i class="iconfont icon-shang tabbottomicon"></i>
      </div>
    </div>
    <div class=""></div>
  </div>
</template>

<script>
  import eventBus from '../../eventBus.js'
  export default {
    name: 'RightNav',
    data() {
      return {
        offTop:NaN,
        initTop:NaN,
        tabindex:null,
        tablist: [
          {title:'直播',idname:'bili_live'},
          {title:'动画',idname:'bili_douga'},
          {title:'番剧',idname:'bili_anime'},
          {title:'国创',idname:'bili_guochuang'},
          {title:'漫画',idname:'bili_cartoon'},
          {title:'音乐',idname:'bili_music'},
          {title:'舞蹈',idname:'bili_dance'},
          {title:'游戏',idname:'bili_game'},
          {title:'知识',idname:'bili_know'},
          {title:'课堂',idname:'bili_classroom'},
          {title:'数码',idname:'bili_digital'},
          {title:'生活',idname:'bili_life'},
          {title:'鬼畜',idname:'bili_guichu'},
          {title:'时尚',idname:'bili_fashion'},
          {title:'资讯',idname:'bili_information'},
          {title:'娱乐',idname:'bili_ent'},
          {title:'专栏',idname:'bili_read'},
          {title:'电影',idname:'bili_movie'},
          {title:'TV剧',idname:'bili_tvplay'},
          {title:'影视',idname:'bili_cinephile'},
          {title:'记录片',idname:'bili_record'},
        ]
      }
    },
    methods:{
      getEventData(){
        eventBus.$on('eventFrom',(val)=>{
          this.offTop = val
          this.initTop = val
        })
      },
      handleScroll(event){
          this.offTop =  (this.initTop - document.documentElement.scrollTop).toFixed(1)
          if(this.offTop <= 0){
            this.offTop =  80
          }else if(this.offTop == this.initTop){
            this.offTop =  this.initTop
          }
      },
      // 返回顶部
      goTopClick(){
        document.documentElement.scrollTop = 0
        this.tabindex = null
      },
      // 锚点跳转
      goClick(idname,index){
        this.tabindex = index
        jquery("html,body").animate({scrollTop:jquery('#'+idname).offset().top},10)
      }
    },
    mounted() {
      this.getEventData()
      window.addEventListener('scroll', this.handleScroll);//添加滚轮滚动事件
    },
    destroyed() {
      window.removeEventListener('scroll', this.handleScroll); // 离开页面清除（移除）滚轮滚动事件
    }
  }
</script>

<style scoped>
  .rightnav-container{
    position: fixed;
    left: calc(50% + 3px);
    margin-left: 615px;
    /* top: 10px; */
    top: 263px;
  }
  .icontx{
    position: absolute;
    font-size: 8px;
    top:-10px;
    left: 7px;
    z-index: 2;
  }
  .rightnav-box{
    position: relative;
    background-color: #fff;
    padding-top: 6px;
    border: 1px solid #e7e7e7;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    z-index: 2;
    box-sizing: border-box;
  }
  .tab-item{
    width: 54px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    user-select: none;
    background-color: #fff;
    color:#212121;
    cursor: pointer;
    transition: all .2s;
  }
  .tab-item:hover{
    background-color: #00a1d6;
    color:#fff;
  }
  .tabitemActive{
    background-color: #00a1d6;
    color:#fff;
  }
  .tab-bottom-icon{
    width: 54px;
    text-align: center;
    user-select: none;
    transition: all .2s;
    background-color: #fff;
    cursor: pointer;
  }
  .tab-bottom-icon>i{
    color:#999;
    font-size: 14px;
    font-weight: bold;
  }
  .iconqiehuan{
    height: 32px;
    line-height: 32px;
    position: relative;
    border-top: 1px solid #E7E7E7;
    margin-top: 5px;
  }
  .iconshang{
    position: absolute;
    left: -1px;
    bottom:-32px;
    width: 56px;
    line-height: 30px;
    height: 32px;
    border: 1px solid #E7E7E7;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-sizing: border-box;
  }
  .tab-bottom-icon:hover{
    background-color: #00A1D6;
  }
  .tab-bottom-icon:hover .tabbottomicon{
    color:#fff;
  }
</style>
